<script setup lang="ts">
import type { ProcessDataModel } from '#/api/traceability/models';

import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import {
  Collapse,
  CollapsePanel,
  Table,
  TabPane,
  Tabs,
  Tag,
} from 'ant-design-vue';

import { getStepProcessDataApi } from '#/api/traceability/productProcessQuery';

const data = ref<ProcessDataModel>({});

const stepTaskColumns = [
  { title: '参数名称', dataIndex: 'paramName', key: 'paramName' },
  { title: '值', dataIndex: 'value', key: 'value' },
  { title: '结果', dataIndex: 'result', key: 'result' },
  { title: '最小值', dataIndex: 'minLimit', key: 'minLimit' },
  { title: '最大值', dataIndex: 'maxLimit', key: 'maxLimit' },
  { title: '单位', dataIndex: 'unit', key: 'unit' },
];

const stepColumns = [
  { title: '参数名称', dataIndex: 'paramName', key: 'paramName' },
  { title: '值', dataIndex: 'value', key: 'value' },
  { title: '结果', dataIndex: 'result', key: 'result' },
  { title: '单位', dataIndex: 'unit', key: 'unit' },
];

const [Drawer, drawerApi] = useVbenDrawer({
  onOpenChange: async (isOpen: boolean) => {
    if (isOpen) {
      const { id } = drawerApi.getData<Record<string, any>>();
      data.value = await getStepProcessDataApi(id);
    }
  },
  header: false,
  footer: false,
});

const tagColorForResult = (result: string) => {
  switch (result) {
    case 'NG': {
      return 'red';
    }
    case 'OK': {
      return 'green';
    }
    default: {
      return '';
    }
  }
};
</script>

<template>
  <Drawer>
    <div class="h-full">
      <Tabs>
        <TabPane key="stepTask" tab="工步数据">
          <Collapse :bordered="false" ghost>
            <CollapsePanel
              v-for="item in data.stepTaskExecutions"
              :key="item.id"
            >
              <template #header>
                <span
                  v-if="![1, 3].includes(item.passResult)"
                  class="font-bold text-[#cd201f]"
                  >{{ item.stepTaskName }}
                </span>
                <span v-else>{{ item.stepTaskName }}</span>
              </template>
              <Table
                :columns="stepTaskColumns"
                :data-source="item.data"
                :pagination="false"
                align="center"
                size="small"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'result'">
                    <Tag
                      v-if="record.result"
                      :color="tagColorForResult(record.result)"
                    >
                      {{ record.result }}
                    </Tag>
                  </template>
                </template>
              </Table>
            </CollapsePanel>
          </Collapse>
        </TabPane>
        <TabPane
          key="step"
          tab="工艺步骤数据"
          :disabled="data.stepExecution?.data?.length === 0"
        >
          <Table
            :columns="stepColumns"
            :data-source="data.stepExecution?.data"
            :pagination="false"
            align="center"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'result'">
                <Tag
                  v-if="record.result"
                  :color="tagColorForResult(record.result)"
                >
                  {{ record.result }}
                </Tag>
              </template>
            </template>
          </Table>
        </TabPane>
      </Tabs>
    </div>
  </Drawer>
</template>
